<template>
	<view>
		<view class="header">
			<u--image :src="assetUrl + 'bg.jpg'" mode="scaleToFill" width="100%" height="340rpx"></u--image>
			<view class="user-box">
				<view class="rule">签到规则</view>
			</view>
		</view>
		<view style="padding: 0 20rpx;">
			<view class="integral-box">
				<view class="title">当前可用额度</view>
				<view class="value">{{userInfo.able_num}}</view>
				<u-button class="btn" :text="signBtnText" :disabled="signBtnDisabled" shape="circle"
					color="linear-gradient(-90deg,#1cc48c, #96E8BA)" @click="showAd">
				</u-button>
			</view>
			<uni-calendar :showMonth="true" :lunar="true" :startDate="startDate" :continuous="continuous">
			</uni-calendar>
		</view>
		<signInModal custom :show="attendanceModalVisible">
			<view class="attendance-modal">
				<view class="modal-header">
					<image :src="assetUrl + 'cup.png'" mode="widthFix"></image>
				</view>
				<view class="modal-content">
					<view class="title">您已获取今日份额度</view>
					<view class="tips">签到额度可转存使用哦~</view>
				</view>
				<view class="d-flex align-items-center just-content-center">
					<u-button shape="circle" class="btn" @click="attendanceModalVisible = false" color="#1cc48c">
						我知道了
					</u-button>
				</view>
			</view>
		</signInModal>
	</view>
</template>

<script>
	import uniCalendar from '@/components/calendar/calendar';
	import signInModal from '@/components/modal/signInModal';
	export default {
		components: {
			uniCalendar,
			signInModal
		},
		data() {
			return {
				userInfo: {},
				attendanceModalVisible: false,
				startDate: '',
				endDate: '',
				signBtnText: '已签到',
				signBtnDisabled: true,
				continuous: 0,
				adloading: false,
				assetUrl: this.$configData.assetsUrl
			}
		},
		onLoad() {
			//获取用户信息
			this.getUserInfo();
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth();
			this.startDate = `${year}-${month}-01`;
		},
		methods: {
			async getUserInfo() {
				var _res = await this.$http.requestApi('POST', 'client/getUserInfo', {
					plat_type: this.$platType,
					loginType: 1
				});
				if (_res.status == 200) {
					this.userInfo = _res.data;
					this.signBtnText = (this.userInfo.sign_in_type == 1 ? '已签到' : '签到');
					this.signBtnDisabled = (this.userInfo.sign_in_type == 1 ? true : false);
				}
			},
			async attendance() {
				this.signBtnText = '签到中';
				var _res = await this.$http.requestApi('POST', 'client/signIn', {
					plat_type: this.$platType
				});
				if (_res.status == 200) {
					this.attendanceModalVisible = true;
					this.signBtnText = '已签到';
					this.signBtnDisabled = true;
					this.getUserInfo();
				} else {
					this.signBtnText = '签到';
					uni.showToast({
						icon: 'none',
						title: _res.msg
					})
				}
			},
			showAd() {
				this.attendance();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 220rpx;
		position: relative;

		.user-box {
			position: absolute;
			top: 50rpx;
			bottom: 0;
			right: 0;
			color: #fff;

			.rule {
				font-size: 12px;
				border-radius: 50rem 0 0 50rem;
				background-color: rgba($color: #ffffff, $alpha: 0.3);
				padding: 10rpx 30rpx;
			}
		}
	}

	.integral-box {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -70rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);

		.title {
			font-size: 28rpx;
			color: black;
			margin: 20rpx 0 30rpx;
		}

		.value {
			font-size: 46rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.btn {
			font-size: 16px;
			color: #FFFFFF;
			width: 50%;
		}
	}

	/deep/.uni-calendar {
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	}

	.attendance-modal {
		.modal-header {
			width: 100%;
			margin-top: -180rpx;
			position: relative;

			image {
				width: 100%;
			}
		}

		.modal-content {
			text-align: center;
			padding: 50rpx 0;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.tips {
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #3333;
			}
		}

		.btn {
			width: 100%;
			border-radius: 50rem;
			font-size: 15px;
		}
	}
</style>